<template>
    <div id="pager">
        <div class="info">{{ count }}/{{ total }}</div>
        <div class="page">
            <button @click="onPrev">上页</button>
            <span>{{ paged }} / {{ pages }}</span>
            <button @click="onNext">下页</button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: 0
        },
        limit: {
            type: Number,
            default: 20
        },
        count: {
            type: Number,
            default: 0
        },
        value: {
            type: Number,
            default: 1
        }
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    computed: {
        pages() {
            return Math.ceil(this.total / this.limit)
        }
    },
    data() {
        return {
            paged: 1
        }
    },
    watch: {
        value(newValue) {
            this.paged = newValue
        },
        paged(newValue) {
            this.$emit('change', newValue)
        }
    },
    methods: {
        onNext() {
            this.paged = this.paged < this.pages ? this.paged + 1 : this.pages
        },
        onPrev() {
            this.paged = this.paged > 1 ? this.paged - 1 : 1
        }
    }
}
</script>

<style scoped>
#pager {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    font-size: 14px;


}

.info,
.page {
    margin: 5px 10px;
    line-height: 30px;
}

.page>button {
    width: 50px;
    height: 30px;
    cursor: pointer;
    line-height: 28px;
    padding: 0;
}
</style>